<template>
    <div class="login-container">
        <div class="login-box">
            <h2>系统登录</h2>
            <div class="login-form">
                <div class="form-item">
                    <input type="email" v-model="loginForm.email" placeholder="请输入邮箱">
                </div>
                <div class="form-item">
                    <input type="password" v-model="loginForm.password" placeholder="请输入密码">
                </div>
                <div class="form-item">
                    <button @click="submit">登录</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { apiLogin } from '@/request/admin'
import { reactive } from 'vue'
import { useUserStore } from '@/stores/user'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'

const router = useRouter()

const userStore = useUserStore()

const loginForm = reactive({
    email: '',
    password: ''
})

async function submit() {
    const res = await apiLogin(loginForm)

    userStore.setUser(res.data.user)

    ElMessage.success('登录成功')
    setTimeout(() => {
        router.push('/home')
    }, 1500)

}
</script>

<style scoped>
.login-container {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f5f5f5;
    background-image: url('https://mysys.seig.edu.cn/static/img/login-background.f9f49138.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    .login-box {
        width: 400px;
        padding: 30px;
        background: white;
        border-radius: 8px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);

        h2 {
            text-align: center;
            margin-bottom: 30px;
            color: #333;
        }

        .login-form {
            .form-item {
                margin-bottom: 20px;

                input {
                    width: 95%;
                    padding: 10px;
                    border: 1px solid #dcdfe6;
                    border-radius: 4px;
                    outline: none;
                    transition: all 0.3s;

                    &:focus {
                        border-color: #409eff;
                    }
                }

                button {
                    width: 100%;
                    padding: 12px;
                    background-color: #409eff;
                    color: white;
                    border: none;
                    border-radius: 4px;
                    cursor: pointer;
                    transition: all 0.3s;

                    &:hover {
                        background-color: #66b1ff;
                    }
                }
            }
        }
    }
}
</style>
